<!doctype html>
<html>
<head>
		<meta charset="utf-8">	
		<title>开始使用layer</title>
</head>
<body>

<script src="../../jquery.min.js"></script>
<script src="layer.min.js"></script>
<script>
$(function(){
	
//弹出一个页面层
$('#test2').on('click', function(){
    $.layer({
        type: 1,
        title: false, //不显示默认标题栏
        shade: [0], //不显示遮罩
        area: ['600px', '360px'],
        page: {html: '<img src="http://static.oschina.net/uploads/space/2014/0516/012728_nAh8_1168184.jpg" alt="layer">'}
    });
});

//弹出一个iframe层
$('#test3').on('click', function(){
    $.layer({
        type: 2,
        title: 'iframe父子操作',
        maxmin: true,
        shadeClose: true, //开启点击遮罩关闭层
        area : ['800px' , '460px'],
        offset : ['100px', ''],
        iframe: {src: 'http://10.10.0.99:8089/web/uploadImageInit.htm'}
    });
});

//弹出一个loading层
$('#test4').on('click', function(){
    var ii = layer.load('加载中');
    //此处用setTimeout演示ajax的回调
    setTimeout(function(){
        layer.close(ii);
    }, 1000);
});

//弹出一个tips层
$('#test5').on('click', function(){
    layer.tips('Hello tips!', '#test5', {time: 2});
});
})
</script>

<button id="test2">小小提示层</button>
<input type="button" id="test3" value="test3"/>
<input type="button" id="test4" value="test4"/>
<input type="button" id="test5" value="test5"/>

</body>
</html>